<template>
	<view class="bg-white">
		<u-navbar title="青泓论坛" :bgColor="theme_color" :autoBack="true" :titleStyle="{color:'#ffffff'}"
			leftIconColor="#ffffff">
			<view class="u-nav-slot" slot="left">
				<u-icon name="arrow-left" size="19" color="#ffffff"></u-icon>
				<u-line direction="column" :hairline="false" length="16" margin="0 8px" color="#ffffff"></u-line>
				<u-icon name="home" size="20" color="#ffffff" @click.stop="onToHomePage"></u-icon>
			</view>
		</u-navbar>
		<view :style="'margin-top:' + navH + 'px;'">
			<view class="category">
				<u-tabs :list="categories" @change="changeTabs" keyName="f_name" :lineColor="theme_color"
					:current="current"></u-tabs>
			</view>

			<u-gap height="10" bgColor="#F7F7F7"></u-gap>

			<view class="fw-bolder color000 padding10">最新动态</view>

			<view>
				<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
					<view class="">

					</view>
				</mescroll-body>
			</view>
		</view>

		<view
			style="position: fixed;padding: 10px;border-radius: 50%;align-items: center;justify-content: center;bottom: 20%;right: 10%;background-color: #e2e2e2;;"
			class="acea-row" @click="toAdd">
			<u-icon name="plus"></u-icon>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		post_list
	} from "@/api/classification.js";
	import {
		post_cate
	} from "@/api/store.js";
	const common = require('@/mixins/common');
	var options = {};
	common(options);
	export default {
		mixins: [MescrollMixin, {
			methods: options
		}],
		computed: mapGetters(["isLogin", "app_token", "area_id"]),
		data() {
			return {
				navH: '',
				theme_color: getApp().globalData.theme_color,
				current: 0,
				categories: [],
				fid: 0,
				list: [],
				province_id: '',
				city_id: '',
				district_id: '',
				street_id: '',


			}
		},
		watch: {
			area_id: {
				immediate: true,
				handler(nVal, oVal) {
					var that = this
					if (nVal != oVal) {
						if (nVal.toString().indexOf(",") == -1) {
							that.province_id = nVal.toString();
							that.city_id = '';
						} else {
							var arr = nVal.split(",");
							that.province_id = arr[0];
							that.city_id = arr[1];
						}
					}
				}
			}
		},
		onLoad(e) {
			var that = this;
			this.navH = getApp().globalData.navHeight / 2;
			if (e.from === "home") {
				this.fid = e.fid;
				this.current = e.index
			}

			post_cate({
				market_type: getApp().globalData.market,
				supplier_id: getApp().globalData.supplier_id
			}).then(res => {
				this.categories = res.data
				this.fid = this.categories[0].fid
				this.mescroll.resetUpScroll()
			})

		},
		//#ifdef MP
		// 分享到微信好友
		onShareAppMessage(e) {
			if (e.from === "button") {
				let obj = e.target.dataset.item
				return {
					title: `${obj.title}`,
					imageUrl: '',
					path: `/pages/form/detail?pid=${obj.pid}`
				};
			} else {
				return {
					title: '青泓论坛',
					path: `/pages/form/index`
				};
			}
		},
		//分享到朋友圈
		onShareTimeline(res) {
			return {
				title: '青泓论坛',
				path: '/pages/form/index'
			};
		},
		//#endif
		methods: {
			toAdd() {
				uni.navigateTo({
					url: '/pages/post/index'
				})
			},
			changeTabs(e) {
				this.fid = e.fid;
				this.mescroll.resetUpScroll()
			},

			upCallback(page) {
				var that = this;
				that.current_page = page.num
				post_list({
					fid: that.fid,
					page: page.num,
					province_id: that.province_id || '',
					city_id: that.city_id || '',
					district_id: that.district_id,
					street_id: that.street_id
				}).then(async (res) => {
					this.mescroll.endSuccess(res.data.length);

					this.list = this.list.concat(res.data);

				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},

			toDetail(item) {
				uni.navigateTo({
					url: './detail?content=' + JSON.stringify(item)
				})
			},

		}
	}
</script>

<style scoped lang="scss">
	.u-nav-slot {
		@include flex;
		align-items: center;
		justify-content: space-between;
		border-width: 0.5px;
		border-radius: 100px;
		border: 1px solid #ffffff;
		padding: 3px 7px;
		opacity: 0.8;
	}

	.waterfall-box {
		padding: 20rpx 5rpx;
		box-sizing: border-box;

		>view {
			padding: 0 5rpx;
		}

		.list-item {
			margin-bottom: 0;
			// 设置透明，默认是可视的
			opacity: 0;
			// 默认超出隐藏，不影响加载中的文字显示效果
			overflow: hidden;
			height: 0;
			transform: translateY(40upx);
			transition: all 0.3s ease-in-out 0s;

			&.show {
				border-radius: 5px;
				margin-bottom: 10rpx;
				opacity: 1;
				overflow: auto;
				height: auto;
				transform: translateY(0);
			}
		}
	}

	.h-flex-x {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		align-content: flex-start;

		&.h-flex-2 {
			>view {
				width: 50%;
			}
		}
	}
</style>